<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>宣传板</title>
    <script src="../../js/header.js"></script>
    <style type="text/css">
        html, body, #BoardInfo {
            padding: 0px;
            margin: 0px;
        }
        #BoardInfo{
            border-top: 3px solid #0D9AFF;
            padding: 25px;
        }
        .tab-title{
            font-size: 16px;
            font-weight: bold;
            border-left: 4px solid #0D9AFF;
            font-family: PingFangSC-Medium;
            padding-left:10px;
            margin-bottom: 20px;
        }
        .el-dialog__footer {
            padding: 10px 20px 20px;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        .el-dialog__body {
            color: rgb(96, 98, 102);
            font-size: 14px;
            word-break: break-all;
            padding: 0px 20px;
        }
        .el-tooltip__popper{
         	max-width:60%;
     	}
        #excel {
            display: none;
        }
        .el-input__inner {
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        }

        .el-select {
            width: 100%;
        }

        /* 搜索按钮样式修改 */
        #BoardInfo .el-button.is-circle.search_btn{
            position: absolute;
            right: 0;
            top: 0;
            border: 0;
            background: none;
        }
        #BoardInfo .el-button.is-circle.search_btn i{
            font-size: 17px;
        }

        .form_date_width .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width : 100%;
        }
    </style>
</head>

<body>
<div v-cloak id="BoardInfo">
    <div style="margin-top: 10px;">
        <div style="margin-top: 10px;border-bottom:1px solid rgba(200,200,200,0.43);">
            <el-form :model="selectForm" :rules="rules" ref="selectForm" label-width="150px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="标题:" prop="" label-width="110px">
                            <el-input v-model="selectForm.title" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建人:" prop="" label-width="110px">
                            <el-input v-model="selectForm.createUser" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建人单位:" prop="" label-width="110px">
                            <el-select v-model="selectForm.createUserunit" placeholder="请选择创建人单位">
                                <el-option
                                        v-for="item in orgData"
                                        :key="item.appId"
                                        :label="item.dictName"
                                        :value="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row  >
                    <el-col span="8">
                        <el-form-item label="状态:" label-width="110px">
                            <el-select  v-model="selectForm.statte" placeholder="请选择" >
                                <el-option label="未发布" value="0"></el-option>
                                <el-option label="已发布" value="1"></el-option>
                                <el-option label="已撤销" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col span="12">
                        <el-form-item label="发布时间:" label-width="110px">
                            <el-row>
                                <el-col span="6" style="width: 180px;">
                                    <el-form-item prop="TimeFirst">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="selectForm.TimeFirst"
                                                        value-format="yyyy-MM-dd" style="width: 180px;">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col span="1" style="color: rgb(192, 204, 218);text-align: center;">
                                    <span>至</span>
                                </el-col>
                                <el-col span="6">
                                    <el-form-item prop="timeEnd">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="selectForm.timeEnd"
                                                        value-format="yyyy-MM-dd" style="width: 180px;">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                    <div style="float: right;">
                        <el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="searchForm()">查询</el-button>
                        <el-button type="warning" size="small" style="width: 60px;height: 30px;" @click="resetForm()">重置</el-button>
                    </div>
                </el-row>
            </el-form>
        </div>

        <el-table :data="tableData" border style="width: 100%;margin-top: 35px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column type="selection" ></el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    width="70"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="createUser"
                    label="创建人"
                    width="130"
                    align="center" >
            </el-table-column>
            <el-table-column
                    prop="createUserunit"
                    label="创建人单位"
                    width="140"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="150"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="releaseTime"
                    label="发布时间"
                    width="150"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="statte"
                    label="状态"
                    width="90"
                    align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.statte==0">未发布</span>
                    <span v-if="scope.row.statte==1">已发布</span>
                    <span v-if="scope.row.statte==2">已撤销</span>
                </template>
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="title"
                    label="标题"
                    width="150"
                    align="center">
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="draftContent"
                    label="宣传稿内容"
                    width="260"
                    align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="">
                <template slot-scope="scope" fixed="right">
                    <span v-if="scope.row.statte == 0">
	                    <el-button class="look" size="mini" @click="checkContent(scope.$index,scope.row)">查看</el-button>
	                    <el-button type="primary" size="mini" @click="edit(scope.$index,scope.row)" >修改</el-button>
	                    <el-button type="success" size="mini" @click="fabu(scope.$index,scope.row)" >发布</el-button>
	                    <el-button type="danger" size="mini" @click="del(scope.$index,scope.row)" >删除</el-button>
	                    <el-button type="warning" size="mini" @click="recall(scope.$index,scope.row)" disabled>撤销</el-button>
                    </span>
                    <span v-if="scope.row.statte == 1">
	                    <el-button class="look" size="mini" @click="checkContent(scope.$index,scope.row)">查看</el-button>
	                    <el-button type="primary" size="mini" @click="edit(scope.$index,scope.row)" disabled>修改</el-button>
	                    <el-button type="success" size="mini" @click="fabu(scope.$index,scope.row)" disabled>发布</el-button>
	                    <el-button type="danger" size="mini" @click="del(scope.$index,scope.row)" disabled>删除</el-button>
	                    <el-button type="warning" size="mini" @click="recall(scope.$index,scope.row)" >撤销</el-button>
                    </span>
                    <span v-if="scope.row.statte == 2">
	                    <el-button class="look" size="mini" @click="checkContent(scope.$index,scope.row)">查看</el-button>
	                    <el-button type="primary" size="mini" @click="edit(scope.$index,scope.row)" >修改</el-button>
	                    <el-button type="success" size="mini" @click="fabu(scope.$index,scope.row)" >发布</el-button>
	                    <el-button type="danger" size="mini" @click="del(scope.$index,scope.row)" >删除</el-button>
	                    <el-button type="warning" size="mini" @click="recall(scope.$index,scope.row)" disabled>撤销</el-button>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div style="overflow: hidden;">
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagesize"
                        background
                        layout="total, sizes,prev, pager, next"
                        :total="tableTotal"
                        prev-text="上一页"
                        next-text="下一页">
                </el-pagination>
            </div>
        </div>

        <!--查看详情-->
        <el-dialog title="" :visible.sync="dialogForm" center fullscreen>
            <el-form :model="Detail" :rules="rules" ref="Detail" label-width="140px" class="form_date_width">
            	<el-row>
					<el-col :span="4" class="tab-title">
						宣传板信息
					</el-col>
				</el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="创建人:"  prop="createUser" label-width="110px">
                            <el-input v-model="Detail.createUser"  placeholder=""  disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="创建单位:" prop="createUserunit" label-width="190px">
                            <el-input v-model="Detail.createUserunit"  placeholder=""  disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="创建时间:"  prop="createTime" label-width="110px">
                        <el-date-picker type="date"v-model="Detail.createTime" placeholder="" value-format="yyyy-MM-dd HH:mm"  disabled></el-date-picker>
                    </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="标题:"  prop="title" label-width="110px">
                            <el-input v-model.trim="Detail.title" placeholder="" :disabled="formDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="内容:"  prop="draftContent" label-width="110px">
                            <el-input
                                    type="textarea"
                                    :disabled="formDisabled"
                                    :autosize="{ minRows: 8, maxRows: 8}"
                                    placeholder=""
                                    maxlength="500"
                                    show-word-limit
                                    v-model.trim="Detail.draftContent">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="附件:" prop="" label-width="110px">
                            <iframe width="100%"  style="height: 270px;border: none;"  scrolling="no"   :src="link"></iframe>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="22">
                        <div style="float:right;">
                            <span v-if="formDisabled == false">
                                 <el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="save('Detail')">修改</el-button>
                          <!--  <el-button type="success" size="small" style="width: 60px;height: 30px;" @click="fabu('Detail')">发布</el-button>-->
                            </span>
                            <el-button type="info" size="small" style="width: 60px;height: 30px;" @click="dialogForm = false; clearAll()">关闭</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</div>
<script>

    var vm = new Vue({
        el: '#BoardInfo',
        data() {
            return {
                uuid:'',
                link:'',
                dialogForm: false,//查看联合监管任务详情
                currentPage: 1, //默认显示页面为1
                pagesize: 10, // 每页的数据条数
                tableTotal:'',
                Detail: {
                        Id : '',
                        title:'',
                        createUserunit : '',
                        createUser : '',
                        createTime:'',
                        draftContent : ''
                },
                rules: {
                    title: [{
                        required : true,
                        message : '必填',
                        trigger : 'blur'
                    },{
                        max : 500,
                        message : '长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    createUserunit: [{
                        required : true,
                        message : '必填',
                        trigger : 'blur'
                    }],
                    createUser: [{
                        required : true,
                        message : '必填',
                        trigger : 'blur'
                    }],
                    createTime: [{
                        required : true,
                        message : '必填',
                        trigger : 'blur'
                    }],
                    draftContent:[{
                        required : true,
                        message : '必填',
                        trigger : 'blur'
                    },{
                        max : 5000,
                        message : '长度最大为5000个字符',
                        trigger : 'blur'
                    }]
                },
                selectForm: {
                    title:'',
                    createUserunit : '',
                    createUser : '',
                    TimeFirst:'',
                    timeEnd : '',
                    statte:''
                },
                Form: {
                    title:'',
                    createUserunit : '',
                    createUser : '',
                    TimeFirst:'',
                    timeEnd : '',
                    statte:''
                },
                currentRow: null,
                formDisabled: false,
                tableData: [],
                showOnSubmit: true,
                showOnReplace: false,
                orgData:[],

            }
        },
        created(){
            axios.post('/dzjwgr/dict/getdict/d_org').then(res => {
                this.orgData = res.data.data.result;
            }).catch(e => {
                this.$message.error("网络连接超时");
            })
        },
        mounted(){
           this.getData();
        },
        methods: {
            getData() {
            	var pagesize = this.pagesize;
                var pageno = this.currentPage;
                axios({
                    method: 'get',
                    url: '/dzjwgr/board/xcbList',
                    params: {
                    	title: this.Form.title.trim(),
                        createUserunit: this.Form.createUserunit,
                        createUser: this.Form.createUser,
                        releaseStartTime: this.Form.TimeFirst,
                        releaseEndTime: this.Form.timeEnd,
                        statte: this.Form.statte,
                        pageSize: pagesize,
                        pageNo: pageno
                    }
                })
                    .then(response => {
                    let data = response.data;
                if (data.code == 200) {
                    console.log(data.data.results)
                    let dataInformation = data.data.results;
                    this.tableTotal = data.data.total;// 数据长度
                    this.tableData = dataInformation;
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            },
            /* 列表页搜索 */
            searchForm() {
                var start=this.selectForm.TimeFirst;
                this.currentPage=1;
                var end=this.selectForm.timeEnd;
                var count=this.checkDate(end,start);
                if(count<0){
                    this.$message.error("开始时间不能大于结束时间")
                }else {
                    this.Form=  JSON.parse(JSON.stringify(this.selectForm));
                    axios({
                        method: 'get',
                        url: '/dzjwgr/board/xcbList',
                        params: {
                            pageSize: this.pagesize,
                            pageNo: 1,
                            title: this.Form.title,
                            createUserunit: this.Form.createUserunit,
                            createUser: this.Form.createUser,
                            releaseStartTime: this.Form.TimeFirst,
                            releaseEndTime: this.Form.timeEnd,
                            statte: this.Form.statte
                        }
                    })
                        .then(response => {
                            let data = response.data;
                            if (data.code == 200) {
                                let dataInformation = data.data.results;
                                this.tableTotal = data.data.total;// 数据长度
                                this.tableData = dataInformation;
                            } else {
                                this.$message.error(data.msg);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
            // 查看
            checkContent(index,row){
                debugger;
                this.uuid=row.id;
                this.link="../upload/annex.html?uuid="+this.uuid+"&flag=0";
                this.dialogForm = true;
                this.showInformation(index,row);
                this.checkDisabled(true);
            },
            // 修改
            edit(index,row){
                this.uuid=row.id;
                this.link="../upload/annex.html?uuid="+this.uuid+"&flag=1";
                this.dialogForm = true;
                this.showInformation(index,row);
                this.checkDisabled(false);
            },
            // 表单修改提交
            save(Detail) {
                debugger;
                this.$refs.Detail.validate((valid) => {
                    if (valid) {
                        axios({
                            method: 'post',
                            url: '/dzjwgr/board/update',
                            data: this.Detail
                        })
                            .then((response) => {
                            let data = response.data;
                        if (data.code == 200) {
                            debugger;
                            this.dialogForm = false;
                            this.clearAll();
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.resetForm();
                            this.getData();
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                    }
                })

            },
            fabu(index,row) {
                  this.Detail.id=row.id;
                    this.$confirm('确定要发布吗?', '提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '确定',
                        type: 'warning'
                    }).then(() => {
                        axios({
                            method: 'post',
                            url: '/dzjwgr/board/release',
                            data: this.Detail
                        })
                            .then((response) => {
                            let data = response.data;
                        if (data.code == 200) {
                            this.dialogForm = false;
                            this.clearAll();
                            this.$message({
                                type: 'success',
                                message: '发布成功!'
                            });
                            this.resetForm();
                            this.getData();
                        } else {
                            this.$message.error(data.msg);
                        }
                    })
                    .catch(function (error) {
                            console.log(error);
                        });
                    }).catch(() => {
                            this.$message({
                            type: 'info',
                            message: '取消发布'
                        });
                    });


            },
            //获取UUID的方法
            getUuid() {
                axios({
                    method: 'get',
                    url: '/dzjwgr/uuid/getUuid',
                })
                    .then(response => {
                    if (response.data.code == 200) {
                    this.uuid = response.data.data;
                    this.link="../upload/annex.html?uuid="+this.uuid+"&flag=1";
                } else {
                    this.$message.error(response.data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            },
            clearDetail(){
               this.Detail.Id = '',
               this.Detail.title='',
               this.Detail.createUserunit = '',
               this.Detail.createUser = '',
               this.Detail.createTime='',
               this.Detail.draftContent =''
            },
            clearAll(){
                this.clearDetail();
                this.getData()
            },
            handleChange(value) {
                console.log(value);
            },
            // 删除
            del(index, row) {
                var pagesize = this.pagesize;
                var pageno = this.currentPage;
                var afterPage = Math.floor(this.tableTotal / pagesize);
                var nowSize = this.tableTotal % pagesize;
                this.$confirm('确定要删除吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    axios({
                              method: 'post',
                              url: '/dzjwgr/board/delete',
                              params : {
                                  id : row.id,
            }
            })
            .then(response => {
                    let data = response.data;
                if (data.code == 200) {
                    // 确认删除
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    if(nowSize =='1'){
                        if(afterPage=='0'){
                            this.currentPage = 1;
                        }else if(this.currentPage>afterPage){
                            this.currentPage = afterPage;
                        }
                        this.getData();
                    }else {
                        this.getData();
                    }
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '取消删除'
                });
            });
            },
            //撤回
            recall(index, row) {
                this.$confirm('确定要撤回吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    axios({
                              method: 'post',
                              url: '/dzjwgr/board/recall',
                              params : {
                                  id : row.id,
            }
            })
            .then(response => {
                    let data = response.data;
                console.log(response);
                if (data.code == 200) {
                    // 确认撤回
                    this.$message({
                        type: 'success',
                        message: '撤回成功!'
                    });
                    this.resetForm();
                    this.getData();
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '取消删除'
                });
            });
            },
            // 设置允许填写和不允许填写
            checkDisabled(n){
                if(n){
                    this.formDisabled = true;
                }else{
                    this.formDisabled = false;
                }
            },
            /* 列表页重置 */
            resetForm() {
                this.selectForm.currentPage = 1; //默认显示页面为1
                this.selectForm.pagesize = 10; // 每页的数据条数
                this.selectForm.title='',
                this.selectForm.createUserunit='',
                this.selectForm.createUser='',
                this.selectForm.TimeFirst='',
                this.selectForm.timeEnd='',
                this.selectForm.statte='',
                    this.Form.title='',
                    this.Form.createUserunit='',
                    this.Form.createUser='',
                    this.Form.TimeFirst='',
                    this.Form.timeEnd='',
                    this.Form.statte='',
                this.currentPage=1;
                this.getData();
            },
            /* 单选搜索表单 */
            selectCurrentChange(val){
                this.currentRow = val;
            },
            //每页下拉显示数据
            handleSizeChange(size) {
                this.pagesize = size;
                this.getData();
            },
            //点击第几页
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.getData();
            },
            // 公共方法--查看
            showInformation(index,row){
                axios({
                    method: 'get',
                    url: '/dzjwgr/board/info',
                    params:{
                        id: row.id
                    }
                })
                    .then(response => {
                    console.log(response.data);
                if (response.data.code == 200) {
                    this.Detail = response.data.boardsEntity;
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            },
            checkDate(str1, str2){
                if(str1!=null && str2!=null ){
                    var reg = /[^\d]+/;
                    var arr1 = str1.split(reg);
                    var arr2 = str2.split(reg);
                    var d1 = new Date(arr1[0],arr1[1],arr1[2]);
                    var d2 = new Date(arr2[0],arr2[1],arr2[2]);
                    return d1 - d2;
                }

            }
        }
    })
</script>
</body>
</html>